<template>
  <div id="distributionlist" v-cloak> 
      <div class="demo" :style="{  height: dtheight + 'px' }" style="width:1000px;">
            <el-form ref="form" :model="form" label-width="90px">  
                <el-row>               
                    <el-col :span="24" style="display:flex;">
                        <div class="mytitle_item" style="margin-bottom:20px;">
                        {{ variable_name2 }}券兑换时间
                        </div>
                    </el-col>
                    <el-col :span="24" style="display:flex;">  
                       <el-form-item label=""  label-width="0px">
                            <el-col :span="11">
                                    <el-time-picker placeholder="开始时间"   format="HH:mm" value-format="HH:mm" v-model="form.time1" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                            <el-col :span="11">
                                    <el-time-picker placeholder="结束时间"   format="HH:mm" value-format="HH:mm" v-model="form.time2" style="width: 100%;"></el-time-picker>
                            </el-col>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="24" style="display:flex;margin-top:10px;">
                        <div class="mytitle_item" style="margin-bottom:20px;">
                        {{ variable_name2 }}券确认时间
                        </div>
                    </el-col>
                     <el-col :span="24" style="display:flex;">  
                       <el-form-item label=""  label-width="0px">
                            <el-col :span="11">
                                    <el-time-picker placeholder="开始时间"   format="HH:mm" value-format="HH:mm" v-model="form.time3" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                            <el-col :span="11">
                                    <el-time-picker placeholder="结束时间"   format="HH:mm" value-format="HH:mm" v-model="form.time4" style="width: 100%;"></el-time-picker>
                            </el-col>
                        </el-form-item>  
                    </el-col>
                     <el-col :span="24" style="display:flex;margin-top:10px;">
                        <div class="mytitle_item" style="margin-bottom:20px;">
                        {{ variable_name2 }}券数量
                        </div>
                    </el-col>

                     <!-- <el-col :span="24" style="margin-top:10px;">
                        <el-form-item  label="名称" style="background: #4F81BC">
                            <el-col :span="4">每日兑换数量</el-col>
                            <el-col :span="4" >每日使用数量</el-col>
                            <el-col :span="4" >兑换果种使用数</el-col>
                            <el-col :span="4" >进场消耗{{ variable_name2 }}数</el-col>
                            <el-col :span="4" >进场消耗{{ variable_name1 }}数</el-col>
                        </el-form-item> 
                     </el-col> -->
                     
                     <el-col class="top_box_tb" style="">
                           <div class="top_box_tb_item" style="border-right:1px solid white;width:90px;">名称</div>
                           <div class="top_box_tb_item" style="border-right:1px solid white;">每日兑换数量</div>
                           <div class="top_box_tb_item" style="border-right:1px solid white;">每日使用数量</div>
                           <div class="top_box_tb_item" style="border-right:1px solid white;">兑换果种使用数</div>
                           <div class="top_box_tb_item" style="border-right:1px solid white;">进场消耗{{ variable_name2 }}数</div>
                           <div class="top_box_tb_item" >进场消耗{{ variable_name1 }}数</div>
                     </el-col>
                    
                     <el-col :span="24" style="margin-top:10px;">
                        <el-form-item  v-for="(item,index) in valuedata" :key="index" :label="item.title">
                            <el-col :span="4">
                              <el-input v-model.number="item.day_exchange_gdbticket_limit" placeholder="每日兑换数量" style="width:100px;margin-left:15px;"></el-input>
                            </el-col>
                            <el-col :span="4">
                               <el-input v-model.number="item.can_use_gdbticket_number" placeholder="每日使用数量" style="width: 100px;margin-left:15px;" ></el-input>
                            </el-col>
                             <el-col :span="4">
                               <el-input v-model.number="item.use_gdbticket_number" :placeholder="'兑换' + variable_name4 +'使用数'" style="width: 100px;margin-left:15px;" ></el-input>
                            </el-col>
                             <el-col :span="4">
                               <el-input v-model.number="item.into_need_gdb_number" :placeholder="'进场消耗'+ variable_name2 + '数'" style="width: 100px;margin-left:15px;" ></el-input>
                            </el-col>
                             <el-col :span="4">
                               <el-input v-model.number="item.into_need_kmb_number" :placeholder="'进场消耗' + variable_name1 + '数'" style="width: 100px;margin-left:15px;" ></el-input>
                            </el-col>
                        </el-form-item> 
                     </el-col>

                </el-row> 
            </el-form>

            <div style="text-align: center;width:100%;">
                    <el-button type="primary" style="width:250px;margin-top:50px;background: #F5CF49;border:none;" @click="qr_but()">确认</el-button>
            </div>

    </div>

   </div>
</template>

<script>

export default {
   name: 'distributionlist',
   props:{
      distributiondata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        valuedata:[],
        form:{
            time1:'',
            time2:'',
            time3:'',
            time4:''
        }
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 153
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
      list_fun(){
          this.post("/goldbean/gdbTicketDetails", {
	        }).then(res => {
             this.valuedata = res.result.list
             this.form.time1 =  res.result.buyBegin
             this.form.time2 =  res.result.buyEnd
             this.form.time3 =  res.result.sureBegin
             this.form.time4 =  res.result.sureEnd
             //console.log(res)
         })
         
      },
      qr_but(){
          this.$confirm('是否修改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
            this.post("/goldbean/editPost", {
                    arr:this.valuedata,
                    buyBegin:this.form.time1,
                    buyEnd:this.form.time2,
                    sureBegin:this.form.time3,
                    sureEnd:this.form.time4,
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.list_fun()
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
              
        });
      },
  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
   
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
   margin-right: 10px;
}
.tb_class{
    color:#F5CF49;
    font-size:30px;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
  }
  .my_input>>>input{
      width: 300px;
  }

  .top_box_tb{
     display:flex;color:white;
  }
  .top_box_tb_item{
    background: #4F81BC;
    width:150px;
    height:50px;
    line-height:50px;
    text-align: center;
    padding-left:10px;
    box-sizing: border-box;
    font-size:15px;
  }
</style>